<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的草稿箱</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo2.jpg" alt="">
    <span class="title">个人随笔分享平台</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="blog_list.html">随笔主页</a>
    <a href="blog_add.html">写随笔</a>
    <a href="myblog_list.html">我的随笔</a>
    <a href="javascript:logout()">注销</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img src="img/doge.jpg" class="avtar" alt="">
            <h4 id="nickname"></h4>
            <a href="https://www.gitee.com">gitee 地址</a>
            <div class="counter">
                <span>草稿数量</span>
            </div>
            <div class="counter">
                <span id="draftCount"></span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div id="artDiv" class="container-right">
        <!-- 每一篇博客包含标题, 摘要, 时间 -->
    </div>
</div>
<script>
    // 用于展示左侧个人信息
    function showInfo() {
        jQuery.ajax({
            url:"/user/showinfo",
            type:"POST",
            data:{},
            success:function(result) {
                if(result != null && result.code == 200){
                    jQuery("#nickname").text(result.data.nickname);
                    jQuery("#draftCount").text(result.data.draftCount);
                } else {
                    alert("很抱歉, 个人信息加载失败, 请刷新重试!");
                }
            }
        });
    }
    showInfo();
    // 获取草稿箱数据, 即后端数据库中 state 为 0 的文章
    function getMyArtList() {
        jQuery.ajax({
            url:"/art/mylist",
            type:"POST",
            data:{"state":0},
            success:function(result) {
                if(result != null && result.code == 200) {
                    if(result.data != null && result.data.length > 0) {
                        // 此用户有草稿
                        // 拼接文章到列表页
                        var artListDiv = "";
                        for(var i = 0; i < result.data.length; i++) {
                            var artItem = result.data[i];
                            artListDiv += '<div class="blog">';
                            artListDiv += '<div class="title">' + artItem.title + '</div>';
                            artListDiv += '<div class="date">' + artItem.updatetime + '</div>';
                            artListDiv += '<div class="desc">';
                            artListDiv += artItem.content;
                            artListDiv += '</div>';
                            artListDiv += '<div class="mydiv"><span>';
                            artListDiv += '<a href="blog_edit.html?id='+
                                artItem.id +'" class="detail">编辑草稿 &gt;&gt;</a>&nbsp&nbsp';
                            artListDiv += '<a href="javascript:myDel('+ artItem.id + ')" class="detail">删除草稿 &gt;&gt;</a>';
                            artListDiv += '</span></div>';
                            artListDiv += '</div>';
                        }
                        jQuery("#artDiv").html(artListDiv);
                    } else{
                        // 此用户未发表文章或未查询到博客信息
                        jQuery("#artDiv").html('<div><h3>&nbsp;&nbsp;您的草稿箱暂无内容!<a href="/blog_add.html">戳我写下一篇随笔吧~</a></h3></div>');
                    }
                } else {
                    alert("加载文章列表失败，请稍后再试!");
                }
            }
        });
    }
    getMyArtList();
    // 删除文章
    function myDel(id) {
        if(confirm("确认是否删除?")) {
            // 删除文章
            jQuery.ajax({
                url:"/art/del",
                type:"POST",
                data:{"aid":id},
                success:function(result) {
                    if(result != null && result.code == 200 && result.data == 1) {
                        alert("删除成功!");
                        location.href = location.href; // 刷新当前页面
                    } else {
                        alert("发生了未知错误, 删除失败!");
                    }
                }
            });
        }
    }
</script>
</body>

</html>